<template>
	<image :src="item.url" class="chat-message-image" :style="{width:width+'px',height:height+'px'}"></image>
</template>

<script>

export default{
	data(){
		return{
			width:165,
			height:165,
		}
	},
	props:{
		item:{
			type:Object,
			default:()=>{
				return {}
			}
		}
	},
	
	computed:{
		url(){
			return this.item.url
		}
	},
	watch:{
		'url':function(value){
			this.init()
		}
	},
	created:function(){
		this.init()
	},
	methods:{
		init(){
			const {width,height}=this.item,url=this.url
			if(!url){
				return;
			}
			if(width &&  height){
				this.calculate(width,height)
			}
			uni.getImageInfo({
				url,
				success:function(e){
					this.calculate(e.width,e.height)
				}
			})
		},
		calculate(width,height){
			if(width>165 || height>165){
				if(width/height>1){
					this.width=165
					this.height=165*height/width
				}else{
					this.height=165
					this.width=165*width/height
				}
			}else{
				this.width=width
				this.height=height
			}
		}
		
	}
}
</script>

<style scoped>
	
</style>
